<!-- Copyright 2019 The Chromium Authors. All rights reserved.
  -- Use of this source code is governed by a BSD-style license that can be
  -- found in the LICENSE file.
  -->
<style include="cr-shared-style md-select">
  .md-select {
    width: 100%;
  }

  [slot='body'] > div {
    margin-bottom: var(--cr-form-field-bottom-spacing);
  }

  [slot='body'] > #disk-format {
    margin-bottom: 0;
    padding-bottom: 2px;
  }

  [slot='button-container']  {
    padding-top: 32px;
  }

  #warning-icon {
    --iron-icon-fill-color: var(--google-red-600);
  }

  #warning-message {
    color: var(--google-red-600);
    display: inline-block;
    margin-inline-start: 8px;
  }

  cr-dialog::part(dialog) {
    border-radius: 12px;
  }
  cr-dialog::part(wrapper) {
    /* subtract the internal padding in <cr-dialog> */
    padding: calc(24px - 20px);
  }
</style>

<cr-dialog id="dialog" close-text="[[i18n('CLOSE_LABEL')]]"
           single-partition-format$="[[getSinglePartitionFormat()]]">
  <div slot="title">
    [[i18n('FORMAT_DIALOG_TITLE', title)]]
  </div>
  <div slot="body">
    <div>[[getDialogMessage_(isErase_)]]</div>
    <div id="warning-container" hidden="[[!space_used_]]" role="alert">
      <iron-icon id="warning-icon" icon="cr:warning"></iron-icon>
      <div id="warning-message">
        [[i18n('FORMAT_DIALOG_DELETE_WARNING', space_used_)]]
      </div>
    </div>
    <cr-input label="[[i18n('FORMAT_DIALOG_DRIVE_NAME_LABEL')]]"
        id="label" value="{{label_}}" auto-validate="true">
    </cr-input>
    <div id="disk-format">
      <label id="format-type-label" class="cr-form-field-label">
        [[i18n('FORMAT_DIALOG_FORMAT_LABEL')]]
      </label>
      <select class="md-select" aria-labelledby="format-type-label"
          value="{{formatType_::change}}">
        <option value="vfat">FAT32</option>
        <option value="exfat">exFAT</option>
        <option value="ntfs">NTFS</option>
      </select>
    </div>
  </div>
  <div slot="button-container">
    <cr-button class="cancel-button" on-click="cancel_" id="cancel">
      [[i18n('CANCEL_LABEL')]]
    </cr-button>
    <cr-button class="action-button" on-click="format_"
        id="format-button">
      [[getConfirmLabel_(isErase_)]]
    </cr-button>
  </div>
</cr-dialog>
